<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="qaTypeId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="float: right">
        <el-button size="mini" @click="addQaBtn" type="primary" icon="el-icon-plus"/>
      </el-form-item>
    </el-form>
    <el-table :data="qaList" v-if="qaList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="创建时间" prop="created" :formatter="timeFormatter"/>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="类型" prop="type.name"/>
      <el-table-column label="实例">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="instanceBtn(scope.row)">运行</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <el-dialog :visible.sync="editQaDialog" v-if="currQa" width="80%">
      <new-qa :currQa="currQa" v-on:cancel="getQaList"></new-qa>
    </el-dialog>
    <el-dialog :visible.sync="showInstanceDialog" v-if="currQa">
      <new-instance :addForm="currQa" v-on:cancel="showInstanceDialog = false"></new-instance>
    </el-dialog>
  </section>
</template>

<script>
  import newInstance from './instance/newInstance'
  import newQa from './qaManagement/newQa'
  import qaPage from './qaPage/index'
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import dateFormater from '@/common/date-formater'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  export default {
    name: "qaList",
    components:{searchTool,filterTool,qaPage,newQa,newInstance},
    data(){
      return{
        loading:false,
        qaList:null,
        filterObj:{},
        totalPage:0,
        editQaDialog:false,
        currQa:null,
        showInstanceDialog:false
      }
    },
    computed: {
      ...mapGetters(['department']),
    },
    watch:{
    },
    created(){
      this.getQaList()
    },
    methods:{
      ...mapActions({
        fetch: 'fetch'
      }),
      addQaBtn(){
        this.currQa={}
        this.editQaDialog=true
      },
      timeFormatter(a,b,c,d){
        return dateFormater.formatDatetime(c)
      },
      goPage(val){
        this.getQaList(val-1,this.filterObj)
      },
      getQaList(pageNo,filterObj){
        this.fetch({name:"getQuestionnaireList",data:{page:pageNo?pageNo:0,...filterObj}})
          .then(res=>{
            console.log('所有问卷-------',res)
            this.qaList=res.content
            this.totalPage=res.totalPages
            this.editQaDialog=false
            this.currQa={}
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        console.log('编辑问卷--------',row)
        this.$router.push('/qa/edit/'+row.id)
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteQuestionnaire",data:{id:row.id}})
              .then(res=>{
                this.getQaList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      filterEvent(e,objK){
        this.loading=true
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getQaList(0,tmp)//筛选入库单列表
      },
      searchEvent(e){
        this.loading=true
        this.filterObj.key=e
        this.getQaList(0,this.filterObj)
      },
      instanceBtn(row){
        this.showInstanceDialog=true
        this.currQa={
          repeatable:false,
          title:row.title,needReportTemplate:false,qaId:row.id
        }
      }
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
</style>
